<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>妖怪商社 immortal's shop</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="${css }/imtshop.css">
	<script src="${js }/jquery-1.10.2.js"></script>
	<script type="text/javascript">
		$(function(){
			//点击提交按钮，通过ajax提交
			$('#addCartBtn').click(function(){
				var count = $('#count').val();
				if(!count.match(/^\d+$/g)) { //验证必须输入整数
					alert('请输入合法的整数');
				} else {
					$.post('${ctx}/cart/add', 
							{'productId':${bean.id}, 'count': count, 'price': ${bean.price}, 'name':'${bean.name}'}, 
							function(json){
								alert(json);
							});
				}
			});
		});
	</script>
</head>
<body>
	<%@include file="commons/header.jsp" %>
	<div id="main">
		<div id="product_detail" align="left">
			<p>商品名称：${bean.name }</p>
			<p>商品描述：${bean.description }</p>
			<p>商品价格：${bean.price }元</p>
			<c:forEach items="${pics }" var="pic">
				<img src="${img }/product/${pic}">
			</c:forEach>
		</div>
		<br><br><br>
		<div>
			数量：<input name="count" id="count"/><input type="button" id="addCartBtn" value="添加到购物车"/>
		</div>
		<br><br><br>
	</div>
	<%@include file="commons/footer.jsp"%> 
</body>
</html>